<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">

<head>
	<meta charset="UTF-8">
	<title>MakeCode Maker - Blocks / Javascript editor - MakeCode Maker (Cortex class)</title>
	<meta name="Description" content="A Blocks / JavaScript code editor for MakeCode Maker Boards" />

	
<!-- include meta.html -->
<!-- This file is typically overriden by the target, with own Twitter
     account etc. Most data is taken from the theme file though.  
  -->

<!-- include robotsmeta.html -->

<!-- end include robotsmeta.html -->

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@msmakecode" />
<meta name="twitter:title" content="MakeCode Maker - Blocks / Javascript editor - MakeCode Maker (Cortex class)" />
<meta name="twitter:description" content="A Blocks / JavaScript code editor for MakeCode Maker Boards" />
<meta name="twitter:image" content="" />

<meta property="og:title" content="MakeCode Maker - Blocks / Javascript editor - MakeCode Maker (Cortex class)" />
<meta property="og:site_name" content="Microsoft MakeCode" />
<meta property="og:type" content="website" />
<meta property="og:description" content="A Blocks / JavaScript code editor for MakeCode Maker Boards" />
<meta property="fb:app_id" content="" />
<meta property="og:image" content="" />

<meta name="format-detection" content="telephone=no">
<link rel="apple-touch-icon" href="">
<link rel="icon" type="image/png" href="">
<link rel="shortcut icon" href="">
<meta name="theme-color" content="#ecf0f1">

<!-- end include meta.html -->

	
<!-- include head.html -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width,height=device-height,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

<link rel="stylesheet" data-rtl="/blb/rtlsemantic.css" href="/semantic.css" />
<link id="blocklycss"  data-rtl="/blb/rtlblockly.css" rel="stylesheet" href="/blockly.css" />
<link rel="stylesheet" href="/docfiles/style.css" />
<link rel="stylesheet" href="/docfiles/vs.css" />
<link rel="stylesheet" href="/docfiles/target.css" />

<script src="/jquery.js"></script>

<script src="/embed.js" type="text/javascript"></script>
<script src="/docfiles/docs.js" type="text/javascript"></script>
<script src="/docfiles/target.js" type="text/javascript"></script>

<style>
    
.ui.accent { color: #ecf0f1; }
.ui.inverted.accent { background: #ecf0f1; }

</style>

<!-- end include head.html -->


</head>

<body id='root' class='root'>

	<div id="accessibleMenu" class="ui accessibleMenu borderless fixed menu" role="menubar">
		
            <a href="#maincontent" class="ui item link" tabindex="0" role="menuitem">Skip to main content</a>
        
	</div>


	
<!-- include tocheader.html -->
<div class="ui vertical accent lighttoc sidebar menu left hideprint">
    <div class="item">
        <a href="/docs/.html" class="header focused" tabindex="0" title="Go to editor">
            <img aria-hidden="true" role="presentation" class="ui mini image" src="docs/static/logo.svg" />
        </a>
        Documentation
    </div>
    <div class="item search">
        <form id="tocsearch1" role="form" method="get" action="https://www.bing.com/search">
            <div class="ui fluid icon input">
                <input type="hidden" name="q1" value="site:https://maker.makecode.com/" />
                
                <input type="search" name="q" placeholder="Search..." aria-label="Search Documentation">
                <i onclick="document.getElementById('tocsearch1').submit();" tabindex="0" class="search link icon" aria-label="Search" role="button"></i>
            
            </div>
        </form>
    </div>
    <!-- TOC Menu -->
    <div class="menuContainer">
        
    <a class="item " href="/docs/about.html" role="menuitem">About</a>


    <a class="item " href="/docs/faq.html" role="menuitem">FAQ</a>


    <div class="item" title="">
        <a class="header " href="/docs/reference.html" role="menu">Reference</a>
        <div class="menu">
            
    <a class="item " href="/docs/reference/music.html" role="menuitem">music</a>


    <a class="item " href="/docs/reference/pins.html" role="menuitem">pins</a>


    <a class="item " href="/docs/reference/control.html" role="menuitem">control</a>


    <a class="item " href="/docs/reference/serial.html" role="menuitem">serial</a>

        </div>
    </div>


    <div class="item" title="">
        <a class="header " href="/docs/blocks.html" role="menu">Blocks</a>
        <div class="menu">
            
    <a class="item " href="/docs/blocks/on-start.html" role="menuitem">On Start</a>


    <div class="ui  accordion item visible" role="tree" title="">
        <div class=" title">
            <i class="dropdown icon"></i>
            <a class="header" role="treeitem" aria-expanded="false" href="/docs/blocks/loops.html">Loops</a>
        </div>
        <div class=" content">
            
    <a class="item " href="/docs/blocks/loops/repeat.html" role="menuitem">repeat</a>


    <a class="item " href="/docs/blocks/loops/for.html" role="menuitem">for</a>


    <a class="item " href="/docs/blocks/loops/while.html" role="menuitem">while</a>

        </div>
    </div>


    <div class="ui  accordion item visible" role="tree" title="">
        <div class=" title">
            <i class="dropdown icon"></i>
            <a class="header" role="treeitem" aria-expanded="false" href="/docs/blocks/logic.html">Logic</a>
        </div>
        <div class=" content">
            
    <a class="item " href="/docs/blocks/logic/if.html" role="menuitem">if</a>


    <a class="item " href="/docs/blocks/logic/boolean.html" role="menuitem">Boolean</a>

        </div>
    </div>


    <div class="ui  accordion item visible" role="tree" title="">
        <div class=" title">
            <i class="dropdown icon"></i>
            <a class="header" role="treeitem" aria-expanded="false" href="/docs/blocks/variables.html">Variables</a>
        </div>
        <div class=" content">
            
    <a class="item " href="/docs/blocks/variables/assign.html" role="menuitem">assign</a>


    <a class="item " href="/docs/blocks/variables/change.html" role="menuitem">change var</a>


    <a class="item " href="/docs/blocks/variables/var.html" role="menuitem">var</a>

        </div>
    </div>


    <a class="item " href="/docs/blocks/math.html" role="menuitem">Math</a>


    <a class="item " href="/docs/blocks/javascript-blocks.html" role="menuitem">JavaScript blocks</a>


    <a class="item " href="/docs/blocks/custom.html" role="menuitem">Custom blocks</a>

        </div>
    </div>


    <div class="item" title="">
        <a class="header " href="/docs/javascript.html" role="menu">JavaScript</a>
        <div class="menu">
            
    <a class="item " href="/docs/javascript/call.html" role="menuitem">Calling</a>


    <a class="item " href="/docs/javascript/sequence.html" role="menuitem">Sequencing</a>


    <a class="item " href="/docs/javascript/variables.html" role="menuitem">Variables</a>


    <a class="item " href="/docs/javascript/operators.html" role="menuitem">Operators</a>


    <a class="item " href="/docs/javascript/statements.html" role="menuitem">Statements</a>


    <a class="item " href="/docs/javascript/functions.html" role="menuitem">Functions</a>


    <a class="item " href="/docs/javascript/types.html" role="menuitem">Types</a>


    <a class="item " href="/docs/javascript/classes.html" role="menuitem">Classes</a>


    <a class="item " href="/docs/javascript/interfaces.html" role="menuitem">Interfaces</a>


    <a class="item " href="/docs/javascript/generics.html" role="menuitem">Generics</a>

        </div>
    </div>


    <div class="item" title="">
        <a class="header " href="/docs/types.html" role="menu">Types</a>
        <div class="menu">
            
    <a class="item " href="/docs/types/number.html" role="menuitem">Number</a>


    <a class="item " href="/docs/types/string.html" role="menuitem">String</a>


    <a class="item " href="/docs/types/boolean.html" role="menuitem">Boolean</a>


    <a class="item " href="/docs/types/array.html" role="menuitem">Array</a>


    <a class="item " href="/docs/types/function.html" role="menuitem">Function</a>

        </div>
    </div>



    </div>
</div>

<div class="ui fixed accent borderless lighttoc main menu hideprint">
  <div class="ui container">
    
            <a id="togglesidebar" class="launch icon item" tabindex="0" title="Side menu" aria-label="Side menu" role="menu" aria-expanded="false">
                <i class="content icon"></i>
            </a>
        

    <div class="item">
        
    </div>
    
    <div class="right menu">
        <a href="/docs/.html" class="header item" tabindex="0" title="Go to editor">
            <img aria-hidden="true" role="presentation" class="ui mini image" src="docs/static/logo.svg" />
        </a>
    </div>
  </div>
</div>
<!-- end include tocheader.html -->


	<div id="docs" class="pusher">

		
<!-- include toc.html -->
<div class="toc ui accent lighttoc hideprint">
    <div class="ui vertical accent lighttoc sticky menu tocmenu">
        <div class="item">
            <a href="/docs/.html" class="header focused" tabindex="0" title="Go to editor">
                <img aria-hidden="true" role="presentation" class="ui mini image" src="docs/static/logo.svg" />
            </a>
            Documentation
        </div>
        <div class="item search">
            <form id="tocsearch2" role="form" method="get" target="_blank" action="https://www.bing.com/search">
                <div class="ui fluid icon input">
                    <input type="hidden" name="q1" value="site:https://maker.makecode.com/" />
                    
                <input type="search" name="q" placeholder="Search..." aria-label="Search Documentation">
                <i onclick="document.getElementById('tocsearch2').submit();" tabindex="0" class="search link icon" aria-label="Search" role="button"></i>
            
                </div>
            </form>
        </div>
        <!-- TOC Menu -->
        <div class="menuContainer">
            
    <a class="item " href="/docs/about.html" role="menuitem">About</a>


    <a class="item " href="/docs/faq.html" role="menuitem">FAQ</a>


    <div class="item" title="">
        <a class="header " href="/docs/reference.html" role="menu">Reference</a>
        <div class="menu">
            
    <a class="item " href="/docs/reference/music.html" role="menuitem">music</a>


    <a class="item " href="/docs/reference/pins.html" role="menuitem">pins</a>


    <a class="item " href="/docs/reference/control.html" role="menuitem">control</a>


    <a class="item " href="/docs/reference/serial.html" role="menuitem">serial</a>

        </div>
    </div>


    <div class="item" title="">
        <a class="header " href="/docs/blocks.html" role="menu">Blocks</a>
        <div class="menu">
            
    <a class="item " href="/docs/blocks/on-start.html" role="menuitem">On Start</a>


    <div class="ui  accordion item visible" role="tree" title="">
        <div class=" title">
            <i class="dropdown icon"></i>
            <a class="header" role="treeitem" aria-expanded="false" href="/docs/blocks/loops.html">Loops</a>
        </div>
        <div class=" content">
            
    <a class="item " href="/docs/blocks/loops/repeat.html" role="menuitem">repeat</a>


    <a class="item " href="/docs/blocks/loops/for.html" role="menuitem">for</a>


    <a class="item " href="/docs/blocks/loops/while.html" role="menuitem">while</a>

        </div>
    </div>


    <div class="ui  accordion item visible" role="tree" title="">
        <div class=" title">
            <i class="dropdown icon"></i>
            <a class="header" role="treeitem" aria-expanded="false" href="/docs/blocks/logic.html">Logic</a>
        </div>
        <div class=" content">
            
    <a class="item " href="/docs/blocks/logic/if.html" role="menuitem">if</a>


    <a class="item " href="/docs/blocks/logic/boolean.html" role="menuitem">Boolean</a>

        </div>
    </div>


    <div class="ui  accordion item visible" role="tree" title="">
        <div class=" title">
            <i class="dropdown icon"></i>
            <a class="header" role="treeitem" aria-expanded="false" href="/docs/blocks/variables.html">Variables</a>
        </div>
        <div class=" content">
            
    <a class="item " href="/docs/blocks/variables/assign.html" role="menuitem">assign</a>


    <a class="item " href="/docs/blocks/variables/change.html" role="menuitem">change var</a>


    <a class="item " href="/docs/blocks/variables/var.html" role="menuitem">var</a>

        </div>
    </div>


    <a class="item " href="/docs/blocks/math.html" role="menuitem">Math</a>


    <a class="item " href="/docs/blocks/javascript-blocks.html" role="menuitem">JavaScript blocks</a>


    <a class="item " href="/docs/blocks/custom.html" role="menuitem">Custom blocks</a>

        </div>
    </div>


    <div class="item" title="">
        <a class="header " href="/docs/javascript.html" role="menu">JavaScript</a>
        <div class="menu">
            
    <a class="item " href="/docs/javascript/call.html" role="menuitem">Calling</a>


    <a class="item " href="/docs/javascript/sequence.html" role="menuitem">Sequencing</a>


    <a class="item " href="/docs/javascript/variables.html" role="menuitem">Variables</a>


    <a class="item " href="/docs/javascript/operators.html" role="menuitem">Operators</a>


    <a class="item " href="/docs/javascript/statements.html" role="menuitem">Statements</a>


    <a class="item " href="/docs/javascript/functions.html" role="menuitem">Functions</a>


    <a class="item " href="/docs/javascript/types.html" role="menuitem">Types</a>


    <a class="item " href="/docs/javascript/classes.html" role="menuitem">Classes</a>


    <a class="item " href="/docs/javascript/interfaces.html" role="menuitem">Interfaces</a>


    <a class="item " href="/docs/javascript/generics.html" role="menuitem">Generics</a>

        </div>
    </div>


    <div class="item" title="">
        <a class="header " href="/docs/types.html" role="menu">Types</a>
        <div class="menu">
            
    <a class="item " href="/docs/types/number.html" role="menuitem">Number</a>


    <a class="item " href="/docs/types/string.html" role="menuitem">String</a>


    <a class="item " href="/docs/types/boolean.html" role="menuitem">Boolean</a>


    <a class="item " href="/docs/types/array.html" role="menuitem">Array</a>


    <a class="item " href="/docs/types/function.html" role="menuitem">Function</a>

        </div>
    </div>



        </div>
    </div>
</div>
<!-- end include toc.html -->


		<div class="article" id="maincontent">
			<div class="article-inner">

				
<!-- include header.html -->
<div class="ui one column padded grid hideprint hidemobile">
    <div class="column">
        
    </div>
</div>

<!-- end include header.html -->


				<div class="main ui container fluid mainbody">
					
            <button id="printbtn" class="circular ui icon right floated button hideprint" title="Print this page">
                <i class="icon print"></i>
            </button>
         
    <div class="ui text">
        <h1 id="custom-blocks">Custom blocks</h1><p>This page provides a short introduction to defining your own blocks in MakeCode. </p>
<h2 id="custom-blocks-i-can-t-find-it-in-the-editor-">Custom blocks? I can’t find it in the editor!</h2><p>That’s right. It’s possible to define your own functions in JavaScript and turn them into blocks 
with the addition of some special comment macros.</p>
<p>Any exported JavaScript function can be turned into a block by simply adding a <code>//% block</code> comment:</p>
<pre><code class="lang-typescript">namespace fun {
    /**
    * Computes the famous Fibonacci number sequence!
    */
    //% block
    export function fib(value: number): number {
        return value &lt;= 1 ? value : fib(value - 1) + fib(value - 2);
    }
}</code></pre>
<p>There are several options to control the appearance of your blocks. 
We generate a few of those in the template to get you started. 
For the complete guide, read <a target="_blank" rel="nofollow noopener" href="https://makecode.com/defining-blocks">https://makecode.com/defining-blocks</a>.</p>
<h2 id="storing-blocks-within-a-project">Storing blocks within a project</h2><p>Do not add block definitions directly into <code>main.ts</code> as they will show up as grey blocks.
Instead, follow the steps below to add a new file, <code>custom.ts</code>, and add all your blocks in that file.</p>
<p>In order to add <code>custom.ts</code> to your project, you do this:</p>
<ul>
<li>go to JavaScript</li>
<li>click on the <strong>Explorer</strong> view and expand it</li>
<li>click on the <code>+</code> button that just appeared</li>
<li>accept the dialog to add a <code>custom.ts</code> file in your project</li>
</ul>
<p>If you already have added this file to your project, simply navigate to it using the <strong>Explorer</strong> view.</p>
<h2 id="using-a-shared-project-in-extensions">Using a shared project in <strong>Extensions</strong></h2><p>You can add a shared project as a dependent extension and re-use all the blocks from that project. Just click on the <strong>Extensions</strong>
button, paste the shared project url, and search.</p>
<h2 id="development-cycle">Development cycle</h2><p>Once <code>custom.ts</code> is added to your project, you can alternate between this file and the blocks view.
The blocks will automatically reload on each iteration.</p>
<p>If nothing shows up in your category, you might have a syntax error in your function definition.
Make sure that your code compiles and that the comments look correct.</p>
<h2 id="sharing-your-blocks">Sharing your blocks</h2><p>The easiest way to share your blocks is to share the entire project using the <a  rel="nofollow noopener" href="/docs/share.html">share button</a>.</p>
<h2 id="taking-it-to-github">Taking it to GitHub</h2><p>If you plan to reuse those blocks further, you might consider turning them into an <a  rel="nofollow noopener" href="/docs/extensions.html">extension</a>.</p>

    </div>

					<div class="hideprint"></div>
				</div>

				
<!-- include footer.html -->
<footer class="ui vertical footer segment hideprint" aria-hidden="false">
    <div class="ui center aligned container">
        <div class="ui horizontal link list">
            <a class="item" href="https://twitter.com/intent/follow?screen_name=MsMakeCode" title="Follow us on Twitter" target="_blank"
                rel="noopener">
                <i class="huge icon twitter"></i>
            </a>
            <a class="item" href="https://www.instagram.com/makecode/" title="Follow us on Instagram" target="_blank" rel="noopened">
                <i class="huge icon instagram"></i>
            </a>
            <a class="item" href="https://www.youtube.com/channel/UCye7YlvFUUQ1dSy0WZZ1T_Q" title="Subscribe to our YouTube channel"
                target="_blank" rel="noopened">
                <i class="huge icon youtube"></i>
            </a>
            <a class="item" href="mailto:makecode@microsoft.com" title="Send us an Email" rel="noopened">
                <i class="huge icon mail"></i>
            </a>
        </div>
        <div class="ui section divider"></div>
        <div class="ui container horizontal small divided link list">
            <!-- <a class="item" href="https://makecode.com/contact" target="_blank" rel="noopener">Contact Us</a> -->
            <a class="item" href="https://makecode.com/privacy" target="_blank" rel="noopener">Privacy &amp; Cookies</a>
            <a class="item" href="https://makecode.com/termsofuse" target="_blank" rel="noopener"> Terms Of Use</a>
            <a class="item" href="https://makecode.com/trademarks" target="_blank" rel="noopener">Trademarks</a>
            <div class="item">© 2018 Microsoft</div>
        </div>
        <div class="ui container horizontal small divided link list">
            <a class="ui centered item" href="https://makecode.com/" title="Microsoft MakeCode" target="_blank" rel="noopener">Powered by Microsoft MakeCode</a>
        </div>
    </div>
</footer>

<!-- end include footer.html -->

			</div>

		</div>

	</div>


	
<!-- include macros.html -->
<!-- macro button -->

<!-- macro vimeo -->

<!-- macro youtube -->

<!-- macro section -->

<!-- macro hide -->

<!-- macro avatar -->

<!-- macro hint -->

<!-- wrapped around ordinary content -->
<!-- macro main-container -->

<!-- used for 'column' box - they are collected and wrapped in 'column-container' -->
<!-- macro column -->
<!-- macro column-container -->


<!-- Menu on the top of the page -->
<!-- macro item -->

<!-- macro divider -->

<!-- macro top-dropdown -->

<!-- macro inner-dropdown -->


<!-- TOC in the sidebar -->
<!-- macro item -->

<!-- macro divider -->

<!-- macro top-dropdown -->

<!-- macro top-dropdown-noheading -->

<!-- macro inner-dropdown -->

<!-- macro nested-dropdown -->

<!-- end include macros.html -->

	
<!-- include tracking.html -->
<script type="text/javascript" src="/pxtweb.js"></script>
<script type="text/javascript">
    window.loadAppInsights = function (includeCookie) {
        var appInsights=window.appInsights||function(config){
            function i(config){t[config]=function(){var i=arguments;t.queue.push(function(){t[config].apply(t,i)})}}var t={config:config},u=document,e=window,o="script",s="AuthenticatedUserContext",h="start",c="stop",l="Track",a=l+"Event",v=l+"Page",y=u.createElement(o),r,f;y.src=config.url||"https://az416426.vo.msecnd.net/scripts/a/ai.0.js";u.getElementsByTagName(o)[0].parentNode.appendChild(y);try{t.cookie=u.cookie}catch(p){}for(t.queue=[],t.version="1.0",r=["Event","Exception","Metric","PageView","Trace","Dependency"];r.length;)i("track"+r.pop());return i("set"+s),i("clear"+s),i(h+a),i(c+a),i(h+v),i(c+v),i("flush"),config.disableExceptionTracking||(r="onerror",i("_"+r),f=e[r],e[r]=function(config,i,u,e,o){var s=f&&f(config,i,u,e,o);return s!==!0&&t["_"+r](config,i,u,e,o),s}),t
        }({
            instrumentationKey:"9801ed01-c40f-46ec-aa40-2a1742a9e71c",
            disableAjaxTracking: true,
            overridePageViewDuration: false,
            disableExceptionTracking: true,
            isCookieUseDisabled: !includeCookie,
            isStorageUseDisabled: !includeCookie,
            url: "/ai.0.js"
        });
        window.appInsights=appInsights;
        appInsights.queue.push(function () {
            appInsights.context.addTelemetryInitializer(function (envelope) {
                if (typeof pxtConfig === "undefined") return;
                var telemetryItem = envelope.data.baseData;
                telemetryItem.properties = telemetryItem.properties || {};
                telemetryItem.properties["target"] = pxtConfig.targetId;
                telemetryItem.properties["stage"] = (pxtConfig.relprefix || "/--").replace(/[^a-z]/ig, '')
                telemetryItem.properties["cookie"] = includeCookie;
                if (typeof Windows !== "undefined")
                    telemetryItem.properties["WindowsApp"] = 1;
                var userAgent = navigator.userAgent.toLowerCase();
                var userAgentRegexResult = /\belectron\/(\d+\.\d+\.\d+.*?)(?: |$)/i.exec(userAgent); // Example navigator.userAgent: "Mozilla/5.0 Chrome/61.0.3163.100 Electron/2.0.0 Safari/537.36"
                if (userAgentRegexResult) {
                    telemetryItem.properties["Electron"] = 1;
                    telemetryItem.properties["ElectronVersion"] = userAgentRegexResult[1];
                }
                if (typeof pxtElectron !== "undefined") {
                    telemetryItem.properties["PxtElectron"] = 1;
                    telemetryItem.properties["ElectronVersion"] = pxtElectron.versions.electronVersion;
                    telemetryItem.properties["ChromiumVersion"] = pxtElectron.versions.chromiumVersion;
                    telemetryItem.properties["NodeVersion"] = pxtElectron.versions.nodeVersion;
                    telemetryItem.properties["PxtElectronVersion"] = pxtElectron.versions.pxtElectronVersion;
                    telemetryItem.properties["PxtCoreVersion"] = pxtElectron.versions.pxtCoreVersion;
                    telemetryItem.properties["PxtTargetVersion"] = pxtElectron.versions.pxtTargetVersion;
                    telemetryItem.properties["PxtElectronIsProd"] = pxtElectron.versions.isProd;
                }
            });
        });
        appInsights.trackPageView(null, scrubUrl(window.location.toString()), {urlReferrer: scrubUrl(document.referrer.toString())});

        //Scrub the key (if any) from the URL.
        function scrubUrl(url) {
            var scriptIdRegex = /(?:\d{5}-\d{5}-\d{5}-\d{5})|(?:_[0-9a-zA-Z]{12})/g;
            return url.replace(scriptIdRegex, "xxxxx-xxxxx-xxxxx-xxxxx");
        }
    }
    pxt.initAnalyticsAsync();
</script>
<!-- end include tracking.html -->


</body>

</html>